<template>
  <div class="settings">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>系统配置</span>
            </div>
          </template>
          
          <el-form
            ref="settingFormRef"
            :model="settingForm"
            label-width="120px"
          >
            <el-form-item label="系统名称">
              <el-input v-model="settingForm.systemName" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input
                v-model="settingForm.systemDescription"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
            <el-form-item label="默认图书封面">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="settingForm.defaultCover"
                  :src="settingForm.defaultCover"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="每页显示数量">
              <el-input-number
                v-model="settingForm.pageSize"
                :min="10"
                :max="100"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="启用搜索建议">
              <el-switch v-model="settingForm.enableSearchSuggestion" />
            </el-form-item>
            <el-form-item label="启用图书推荐">
              <el-switch v-model="settingForm.enableBookRecommendation" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
              <el-button @click="resetSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          
          <el-descriptions :column="1" border>
            <el-descriptions-item label="系统版本">
              v1.0.0
            </el-descriptions-item>
            <el-descriptions-item label="Vue版本">
              3.2.13
            </el-descriptions-item>
            <el-descriptions-item label="Element Plus版本">
              2.2.0
            </el-descriptions-item>
            <el-descriptions-item label="服务器时间">
              {{ serverTime }}
            </el-descriptions-item>
            <el-descriptions-item label="运行环境">
              Production
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <el-card class="backup-card" style="margin-top: 20px;">
          <template #header>
            <div class="card-header">
              <span>数据备份</span>
            </div>
          </template>
          
          <div class="backup-actions">
            <el-button type="primary" @click="backupData">备份数据</el-button>
            <el-button @click="restoreData">恢复数据</el-button>
          </div>
          
          <div class="backup-history" style="margin-top: 20px;">
            <div class="backup-item" v-for="item in backupHistory" :key="item.id">
              <div class="backup-info">
                <span>{{ item.name }}</span>
                <span class="backup-time">{{ item.time }}</span>
              </div>
              <div class="backup-actions">
                <el-button size="small" @click="downloadBackup(item)">下载</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Settings',
  setup() {
    const settingFormRef = ref(null)
    
    // 系统配置表单
    const settingForm = reactive({
      systemName: '家庭图书管理系统',
      systemDescription: '一个帮助家庭管理图书收藏、记录阅读进度和阅读想法的系统',
      defaultCover: '',
      pageSize: 20,
      enableSearchSuggestion: true,
      enableBookRecommendation: true
    })
    
    // 服务器时间
    const serverTime = ref(new Date().toLocaleString())
    
    // 备份历史
    const backupHistory = ref([
      { id: 1, name: 'backup_20230515.sql', time: '2023-05-15 14:30:00' },
      { id: 2, name: 'backup_20230510.sql', time: '2023-05-10 09:15:00' },
      { id: 3, name: 'backup_20230505.sql', time: '2023-05-05 16:45:00' }
    ])
    
    // 更新服务器时间
    onMounted(() => {
      setInterval(() => {
        serverTime.value = new Date().toLocaleString()
      }, 1000)
    })
    
    const beforeAvatarUpload = (rawFile) => {
      if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('头像图片必须是 JPG 或 PNG 格式!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('头像图片大小不能超过 2MB!')
        return false
      }
      settingForm.defaultCover = URL.createObjectURL(rawFile)
      return false // 阻止自动上传
    }
    
    const saveSettings = () => {
      ElMessage.success('设置保存成功')
    }
    
    const resetSettings = () => {
      // 重置为默认值
      settingForm.systemName = '家庭图书管理系统'
      settingForm.systemDescription = '一个帮助家庭管理图书收藏、记录阅读进度和阅读想法的系统'
      settingForm.defaultCover = ''
      settingForm.pageSize = 20
      settingForm.enableSearchSuggestion = true
      settingForm.enableBookRecommendation = true
      ElMessage.info('设置已重置')
    }
    
    const backupData = () => {
      ElMessage.success('开始备份数据')
      // 模拟备份过程
      setTimeout(() => {
        // 添加新的备份记录
        const newBackup = {
          id: backupHistory.value.length + 1,
          name: `backup_${new Date().toISOString().slice(0, 10).replace(/-/g, '')}.sql`,
          time: new Date().toLocaleString()
        }
        backupHistory.value.unshift(newBackup)
        ElMessage.success('数据备份完成')
      }, 2000)
    }
    
    const restoreData = () => {
      ElMessage.info('恢复数据功能')
    }
    
    const downloadBackup = (item) => {
      ElMessage.success(`开始下载 ${item.name}`)
    }
    
    return {
      settingFormRef,
      settingForm,
      serverTime,
      backupHistory,
      beforeAvatarUpload,
      saveSettings,
      resetSettings,
      backupData,
      restoreData,
      downloadBackup
    }
  }
}
</script>

<style scoped>
.card-header {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
}

.setting-card {
  margin-bottom: 20px;
}

.backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.backup-item:last-child {
  border-bottom: none;
}

.backup-info {
  display: flex;
  flex-direction: column;
}

.backup-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>